<template>
    <div class="to_log">
        <div class="title">注册</div>
        <el-form ref="form" label-width="80px" :inline="false">
            <el-form-item label="用户名">
                <el-input :prefix-icon="Avatar" maxlength="6" v-model="userinfo.name" placeholder="admin"
                    size="default"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input :prefix-icon="Lock" maxlength="12" type="password" v-model="userinfo.password" placeholder="输入密码"
                    size="default"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input :prefix-icon="Lock" maxlength="12" type="password" v-model="againpass" placeholder="确认密码"
                    size="default"></el-input>
            </el-form-item>
            <el-form-item class="phone" label="手机号">
                <div class="code">
                    <el-input class="ipt" @input="phone" :prefix-icon="PhoneFilled" type="number" v-model="userinfo.phone"
                        placeholder="手机号" size="default"></el-input>
                    <el-button :plain="true" class="btn" type="primary" size="default" @click="yzm">获取验证码</el-button>
                </div>
            </el-form-item>
            <el-form-item label="验证码" style="width: 13vw;">
                <el-input @input="code" type="number" v-model="userinfo.code" placeholder="验证码" size="default"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" @click="reg"> 注册</el-button>
                <el-button type="primary" size="default" @click="backlogin">登录</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script setup lang="ts">
import { register } from '@/api/user.ts'
import { reactive, ref } from 'vue';
import { Avatar, Lock, PhoneFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { checkTelephone } from '@/utils/checkphone'
let $emit = defineEmits(["backlogin"])
let tempcode = ref<Number>(0)
let userinfo = reactive<any>({
    name: '',
    password: '',
    code: '',
    phone: ''
})
// let oldphone=ref('')
let againpass = ref('')
//手机号长度
const phone = (e: any) => {
    console.log(e)

    if (e.length > 11) {
        userinfo.phone = e.slice(0, 11)

    }
}
//验证码
const code = (e: any) => {

    if (e.length > 6) {
        userinfo.code = e.slice(0, 6)

    }
}
// 回去登录
const backlogin = () => {
    $emit("backlogin")
}
//获取验证码
const yzm = () => {
    setTimeout(() => {
        tempcode.value = Math.floor(Math.random() * 10000)
        userinfo.code = tempcode.value
    }, 2000);

}
//注册
const reg = () => {
    console.log()

    if (userinfo.name.trim() == '') {
        ElMessage({
            message: '名字不能为空',
            type: "error"
        })
        return
    }

    if (!checkTelephone(userinfo.phone)) {
        ElMessage({
            message: '输入有效的手机号码',
            type: 'error'
        })
        return
    }
    if (userinfo.password.trim() == '') {
        ElMessage({
            message: '密码不能为空',
            type: "error"
        })
        return
    }
    if (userinfo.password !== againpass.value) {
        ElMessage({
            message: '密码不一致',
            type: 'error'
        })
        return;
    }
    if (userinfo.code != tempcode.value) {
        ElMessage({
            message: '验证码错误',
            type: 'error'
        })
        return;
    }
    register(userinfo).then(res => {
        console.log(res)
        ElMessage({
            message: '注册成功',
            type: 'success'
        })
        backlogin()
    }).catch(err => {
        ElMessage({
            message: '手机号已注册',
            type: 'error'
        })
        console.log(err)
    })
}
</script>





<style lang="scss" scoped>
@keyframes register {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }

}

.to_log {
    padding: 1vw;
    animation: register 0.5s;
    animation-fill-mode: forwards;
    width: 25vw;
    // height: 35vh;
    backdrop-filter: blur(20px);
    opacity: 0.8;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;



    .title {
        color: #fff;
        font-family: '楷体';
        font-size: 1.5vw;
    }

    ::v-deep .el-form-item__content {

        input[type="number"]::-webkit-inner-spin-button {
            display: none;
        }
    }

    ::v-deep .el-form-item__label {
        color: #FFF2CC;


    }

    .phone {
        .code {
            display: flex;
            justify-content: space-between;

            .ipt {
                flex: 5;
            }

            .btn {
                flex: 2
            }
        }
    }

}
</style>